<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket - jQuery UI: droppable, shopping card demo</title>
	<style type="text/css">
		.ui-draggable { width: 160px; height: 120px; margin: 0.1em; float: right; z-index: 99; border: 1px solid #336699; }
		.ui-droppable { width: 280px; x-position: relative; }
	</style>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="wrapper-panel-frame" class="ui-corner-all">
		<div id="store" style="width: 400px; float: right;">
			<wicket:container wicket:id="books">
				<div wicket:id="draggable" class="ui-widget-content ui-corner-all">
					<div wicket:id="book"></div>
				</div>
			</wicket:container> 
		</div>
		
		<form wicket:id="form">
			<div wicket:id="card">
				<div class="ui-state-default ui-corner-all ui-helper-clearfix" style="height: 20px; padding: 4px; text-align: center;">
					Shopping card
				</div>
				<div class="ui-widget-content ui-corner-all" style="min-height: 220px; margin-top:2px; border: 1px solid #993366;">
					<table width="100%" cellspacing="0" cellpadding="1">
						<tr>
							<th width="45%"></th>
							<th width="20%"></th>
							<th width="35%"></th>
						</tr>
						<tr wicket:id="card-items">
							<td><span wicket:id="label"></span></td>
							<td align="right"><span wicket:id="price"></span></td>
							<td align="right"><button wicket:id="remove">remove</button></td>
						</tr>
						<tr>
							<td><br/></td>
							<td wicket:id="card-amount" align="right"></td>
							<td><br/></td>
						</tr>
					</table>
				</div>
			</div>
		</form>
	</div>
	
	<wicket:fragment wicket:id="book-fragment">
		<table width="100%" cellpadding="2" cellspacing="0">
			<tr>
				<td rowspan="2"><img wicket:id="cover" /></td>
				<td wicket:id="label"></td>
			</tr>
			<tr>
				<td wicket:id="price" align="right"></td>
			</tr>
		</table>		
	</wicket:fragment>
</wicket:extend>
</body>
</html>
